import { useMemo, FC, CSSProperties } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";

const SafeAreaView: FC<{ className?: string, style?: CSSProperties }> = ({ children, className, style }) => {
  // 获取系统信息
  const systemInfo = useMemo(() => {
    return Taro.getSystemInfoSync()
  }, []);

  const { bottom } = systemInfo.safeArea;
  // console.log('safeArea', systemInfo.safeArea, systemInfo.screenHeight)
  const paddingBottom = systemInfo.screenHeight - bottom;
  return (
    <View style={{ ...paddingBottom > 0 ? { ...style, paddingBottom } : {...style} }} className={className}>
      {children}
    </View>
  );
}

export default SafeAreaView;
